import React, { useEffect, useState } from "react";
import { Layout, Menu, Button, Row, Col, Space, Spin } from "antd";
import { LogoutOutlined } from "@ant-design/icons";
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { getToken } from "../../services/admin";


export default function Manage() {
  const { Header, Content, Sider } = Layout;
  const items = [
    { label: "学生管理", key: "/system/student" },
    { label: "班级管理", key: "/system/class" },
    { label: "老师管理", key: "/system/teacher" },
  ];
  const navigate = useNavigate();
  const location = useLocation();
  const [user, setUser] = useState({});
  const handleSelect = ({ key }) => {
    navigate(key);
  }
  const getUser = async () => {
    let { data } = await getToken();
    console.log(data);
    // setUser(data);
  }
  const handleLogout = () => {
    localStorage.clear("token");
    navigate("/login");
  }
  // useEffect(() => {
  //   getUser();
  // }, [user._id]);
  useEffect(() => {
    getUser();
  }, [0]);
  return (
    <Layout>
      <Header className="header">
        <Row>
          <Col span={4}>
            <h1 style={{ color: "white" }}>学生管理系统</h1>
          </Col>
          <Col offset={18} span={2}>
            <Space size={10}>
              {/* <span style={{ color: "white" }}>{user.adminName}</span> */}
              <Button
                type="primary"
                shape="circle"
                icon={<LogoutOutlined />}
                size={20}
                onClick={handleLogout}
              />
            </Space>
          </Col>
        </Row>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            style={{
              height: "100%",
              borderRight: 0,
            }}
            selectedKeys={location.pathname}
            items={items}
            onSelect={handleSelect}
          />
        </Sider>
        <Layout
          style={{
            padding: "0 24px 24px",
          }}
        >

          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}
